<template>
  <div class="app-container dashboard">
    <!-- 概览指标 -->
    <el-row :gutter="20" class="mb20">
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card stat-putaway clickable" @click="goToBarcodeStatus('PUTAWAY')">
          <div class="stat-title">已入库箱数</div>
          <div class="stat-value">{{ kpi.putaway }}</div>
          <div class="stat-desc">状态为 PUTAWAY</div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card stat-inspecting clickable" @click="goToBarcodeStatus('INSPECTING')">
          <div class="stat-title">待质检箱数</div>
          <div class="stat-value">{{ kpi.inspecting }}</div>
          <div class="stat-desc">状态为 INSPECTING</div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card stat-generated clickable" @click="goToBarcodeStatus('GENERATED')">
          <div class="stat-title">已生成箱码数</div>
          <div class="stat-value">{{ kpi.generated }}</div>
          <div class="stat-desc">状态为 GENERATED</div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="6" :lg="6">
        <el-card shadow="hover" class="stat-card stat-total clickable" @click="goToBarcodeStatus(null)">
          <div class="stat-title">箱码总数</div>
          <div class="stat-value">{{ kpi.barcodeTotal }}</div>
          <div class="stat-desc">所有箱码记录</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 工作台快捷入口 -->
    <el-row :gutter="20" class="mb20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>工作台</span>
          </div>
          <div class="quick-grid">
            <div class="quick-item" @click="go('/system/purchase_order')">
              <i class="el-icon-s-order"></i>
              <div class="title">采购订单</div>
            </div>
            <div class="quick-item" @click="go('/system/note')">
              <i class="el-icon-s-claim"></i>
              <div class="title">送货单</div>
            </div>
            <div class="quick-item" @click="go('/system/receipt')">
              <i class="el-icon-s-check"></i>
              <div class="title">收料通知</div>
            </div>
            <div class="quick-item" @click="go('/system/inspection_plan')">
              <i class="el-icon-s-marketing"></i>
              <div class="title">检验计划</div>
            </div>
            <div class="quick-item" @click="go('/system/in')">
              <i class="el-icon-s-goods"></i>
              <div class="title">采购入库</div>
            </div>
            <div class="quick-item" @click="go('/system/barcode')">
              <i class="el-icon-receiving"></i>
              <div class="title">箱码管理</div>
            </div>
            <div class="quick-item" @click="go('/system/inventory')">
              <i class="el-icon-box"></i>
              <div class="title">存货管理</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近动态 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="never" class="mb20">
          <div slot="header" class="clearfix">
            <span>最近收料</span>
          </div>
          <el-table :data="latest.receipts" size="mini" v-loading="loading.latest">
            <el-table-column prop="receiptNoteNo" label="收料单号" min-width="120" />
            <el-table-column prop="supplierCode" label="供应商" min-width="100" />
            <el-table-column prop="totalBoxes" label="箱数" width="80" />
            <el-table-column prop="totalQuantity" label="数量" width="100" />
            <el-table-column prop="createdTime" label="创建时间" min-width="140" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="never" class="mb20">
          <div slot="header" class="clearfix">
            <span>待检计划</span>
          </div>
          <el-table :data="latest.inspecting" size="mini" v-loading="loading.latest">
            <el-table-column prop="planNo" label="计划编号" min-width="120" />
            <el-table-column prop="inventoryCode" label="物料" min-width="100" />
            <el-table-column prop="batchNo" label="批次号" min-width="100" />
            <el-table-column prop="planStatus" label="状态" width="100" />
            <el-table-column prop="createdTime" label="创建时间" min-width="140" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 移除第三方数字动画依赖，直接显示数值
import { listBarcode } from '@/api/system/barcode'
import { listReceipt } from '@/api/system/receipt'
import { listNote } from '@/api/system/note'
import { listPlan } from '@/api/system/plan'

export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      kpi: {
        putaway: 0,
        inspecting: 0,
        generated: 0,
        barcodeTotal: 0
      },
      latest: {
        receipts: [],
        inspecting: []
      },
      loading: {
        kpi: false,
        latest: false
      }
    }
  },
  mounted() {
    this.loadKpi()
    this.loadLatest()
  },
  methods: {
    async loadKpi() {
      this.loading.kpi = true
      try {
        const today = new Date()
        const dateStr = today.toISOString().slice(0, 10) // YYYY-MM-DD
        // 总箱码
        const totalRes = await listBarcode({
          pageNum: 1,
          pageSize: 1,
          'params[beginCreatedTime]': dateStr,
          'params[endCreatedTime]': dateStr
        })
        this.kpi.barcodeTotal = Number(totalRes.total || 0)
        // 已入库
        const putRes = await listBarcode({
          pageNum: 1,
          pageSize: 1,
          barcodeStatus: 'PUTAWAY',
          'params[beginPutawayTime]': dateStr,
          'params[endPutawayTime]': dateStr
        })
        this.kpi.putaway = Number(putRes.total || 0)
        // 待质检
        const inspRes = await listBarcode({
          pageNum: 1,
          pageSize: 1,
          barcodeStatus: 'INSPECTING',
          'params[beginCreatedTime]': dateStr,
          'params[endCreatedTime]': dateStr
        })
        this.kpi.inspecting = Number(inspRes.total || 0)
        // 已生成
        const genRes = await listBarcode({
          pageNum: 1,
          pageSize: 1,
          barcodeStatus: 'GENERATED',
          'params[beginCreatedTime]': dateStr,
          'params[endCreatedTime]': dateStr
        })
        this.kpi.generated = Number(genRes.total || 0)
      } catch (e) {
        // 忽略异常，保持默认值
      } finally {
        this.loading.kpi = false
      }
    },
    async loadLatest() {
      this.loading.latest = true
      try {
        const rRes = await listReceipt({ pageNum: 1, pageSize: 5 })
        this.latest.receipts = Array.isArray(rRes.rows) ? rRes.rows : []
        // 待检计划：直接读取检验计划主表状态为 PENDING 的最近记录
        const pRes = await listPlan({ pageNum: 1, pageSize: 5, planStatus: 'PENDING' })
        this.latest.inspecting = Array.isArray(pRes.rows) ? pRes.rows : []
      } catch (e) {
        this.latest.receipts = []
        this.latest.inspecting = []
      } finally {
        this.loading.latest = false
      }
    },
    go(path) {
      this.$router.push(path)
    },
    goToBarcodeStatus(status) {
      const route = { path: '/system/barcode' }
      if (status) {
        route.query = { barcodeStatus: status }
      }
      this.$router.push(route)
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  .stat-card {
    border-radius: 6px;
    .stat-title { font-size: 14px; color: #888; }
    .stat-value { font-size: 28px; font-weight: 600; margin-top: 6px; }
    .stat-desc { font-size: 12px; color: #999; margin-top: 4px; }
  }
  .stat-received { border-left: 4px solid #20B2AA; }
  .stat-putaway { border-left: 4px solid #20B2AA; }
  .stat-inspecting { border-left: 4px solid #e6a23c; }
  .stat-generated { border-left: 4px solid #67c23a; }
  .stat-total { border-left: 4px solid #909399; }

  .quick-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    grid-gap: 12px;
  }
  .quick-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    border: 1px dashed #e5e6e7;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    color: #606266;
    .title { margin-left: 8px; font-size: 14px; }
    i { font-size: 20px; }
  }
  .quick-item:hover { background: #f5f7fa; }

  .clickable { cursor: pointer; }
  .clickable:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
}

.mb20 { margin-bottom: 20px; }
</style>